import 'package:flutter/material.dart';

class CurveIntervalPage extends StatefulWidget {
  const CurveIntervalPage({super.key});

  @override
  _CurveIntervalPageeState createState() => _CurveIntervalPageeState();
}

class _CurveIntervalPageeState extends State<CurveIntervalPage>
    with SingleTickerProviderStateMixin {
  late final AnimationController _animationController = AnimationController(
      vsync: this, duration: const Duration(milliseconds: 5000));

  @override
  void dispose() {
    // TODO: implement dispose
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('interval 做交错动画'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _animationController.repeat(reverse: true);
        },
        child: Icon(Icons.animation_rounded),
      ),
      body: Center(
        child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SlideBox(
                  color: Colors.blue[200],
                  animationController: _animationController,
                  interval: const Interval(0, 0.2)),
              SlideBox(
                  color: Colors.blue[400],
                  animationController: _animationController,
                  interval: const Interval(0.2, 0.4)),
              SlideBox(
                  color: Colors.blue[600],
                  animationController: _animationController,
                  interval: const Interval(0.4, 0.6)),
              // 嵌入随意动画衔接
              ScaleTransition(
                scale: Tween(begin: 1.0, end: 2.0)
                    .chain(CurveTween(curve: Curves.bounceInOut))
                    .chain(CurveTween(curve: const Interval(0.6, 0.8)))
                    .animate(_animationController),
                child:
                    Container(width: 200, height: 50, color: Colors.red[100]),
              ),
              // SlideBox(
              //     color: Colors.blue[600],
              //     animationController: _animationController,
              //     interval: const Interval(0.6, 0.8)),
              SlideBox(
                  color: Colors.blue[800],
                  animationController: _animationController,
                  interval: const Interval(0.8, 1.0)),
            ],
          ),
        ),
      ),
    );
  }
}

class SlideBox extends StatefulWidget {
  const SlideBox(
      {super.key,
      required this.color,
      required this.animationController,
      required this.interval});

  final AnimationController animationController;
  final Color? color;
  final Interval interval;

  @override
  State<SlideBox> createState() => _SlideBoxState();
}

class _SlideBoxState extends State<SlideBox> {
  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: Tween(begin: Offset.zero, end: const Offset(0.2, 0))
          // 曲线 在interval 前面,不然不生效
          .chain(CurveTween(curve: Curves.bounceOut))
          .chain(CurveTween(curve: widget.interval))
          .animate(widget.animationController),
      child: Container(width: 200, height: 50, color: widget.color),
    );
  }
}
